// todo 提供复用逻辑的函数
import { useIntersectionObserver } from "@vueuse/core";
import { ref } from "vue";

// * 数据懒加载函数
// * @param target : {Element} DOM对象
// * @param apiFn ：{Function} api函数

export const useLazyData = (apiFn) => {
    const target = ref(null)
    const result = ref([])
    const { stop } = useIntersectionObserver(
        // * target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
        target,
        // *isIntersecting 是否进入可视区 true是进入 false是移出
        // *observerElement 被观察的dom
        ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
                // * 停止观察
                stop()
                // *调用api函数获取数据
                apiFn().then(data => {
                    result.value = data.result
                })
            }
        },
        // *第三个参数为配置项
        // *threshold 需要懒加载的容器和可视区交叉的占比（进入的面积/容器完整面试） 取值，0-1 之间，默认比0大，所以需要滚动较多才能触发进入可视区域事件
        {
            threshold: 0
        }
    )
    return { target, result }
}